<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= __('titLe') %></title>
    <link href="image/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_607959_8t0w2txptnj.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/registered.css">
    <link rel="stylesheet" href="/css/userInfo.css">
    <link rel="stylesheet" href="/css/loading.css">
</head>

<body>
    <%- include('base/particles'); %>
    <div class="app">
        <div class="register" @keydown="quickLogin">
            <%- include('base/header'); %>
            <div class="login">
                 <div class="loading" v-show="!loading">
                        <div class="preloader_4">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                 </div>
                <form @submit.prevent="submit" class="clear">
                    <div class="welcomeregister"><%= __('Welcomeregister') %></div>
                    <div class="email"><%= __('RegisteredMail') %></div>
                    <input type="text" class="emailnumber input" v-model="inputtext.email">
                    <div class="emailVerification"  v-if="false"><%= __('Emailverificationcode') %></div>
                    <div class="emailsend" v-if="false">
                        <input type="text" class="input sencode">
                        <button type="button" class="emailsendNumber" @click="sendcode" :disabled="isfalse"><%= __('Sendverificationcode') %></button>
                    </div>
                    <div class="password"><%= __('Enterthepassword') %></div>
                    <input type="password" class="emailnumber input" v-model="inputtext.password">
                    <div class="newpassword"><%= __('Confirmpassword') %></div>
                    <input type="password" class="emailnumber input" v-model="inputtext.rpassword">
                    <div class="newpassword"><%= __('UID') %></div>
                    <input v-show="refID == ''" type="text" class="emailnumber input" v-model="invite">
                    <input v-show="refID !=''" type="text" class="emailnumber input" v-model="refID" disabled="disabled">
                    <div class="agreementbox">
                        <label>
                            <input class="agreement" type="checkbox" @click="CheckAgreement">
                            <span class="agreementiptline" v-if="ischeck"></span>
                        </label>
                        <p class="agreementp tp">
                            <%= __('Whetherapprove') %>
                            <a @click="showprotocol=!showprotocol"><%= __('Thisagreement') %></a>
                            <i><%= __('yearsold') %></i>
                        </p>
                        <div class="protocol" v-show="showprotocol">
                            <span>
                                    <%= __('HYPERPLAY') %>
                            </span>
                            <i class="arrow"></i>
                        </div>
                    </div>
                    <div class="registered-one">
                        <input type="submit" value="<%= __('Registernow') %>" class="SignUpnow">
                        <span class="have"><%= __('existingaccount') %></span>
                        <a href="/singin" class="Login"><%= __('Thelogin') %></a>
                    </div>
                </form>
                
            </div>
            <%- include('base/footer'); %>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '.login',
            data() {
                return {
                    inputtext: {
                        email:'',//邮箱
                        password:'',//一次密码
                        rpassword:'',//二次密码
                    },
                    istrue: true,
                    ischeck: false,
                    maskfalse:false,
                    theuser:'',
                    information:'',
                    showprotocol:false,
                    refID:"",
                    isfalse:false,
                    loading:false,
                    invite:""
                };
            },
            created() {
                if(window.sessionStorage.getItem('refererId')&&window.sessionStorage.getItem('refererId')!=""){
                    this.refID=window.sessionStorage.getItem('refererId')
                }
                // if(this.refID==""){
                //     this.invite=""
                // }else{
                //     this.invite=this.refID
                // }
            },
            methods: {
                sendcode(){
                    let lang = this.getCookie("lang");
                    let regValid = (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)
                    if (this.inputtext.email == undefined || this.inputtext.email == "") {
                        var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                        var b='<div class="maskLayer"></div>'
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                        document.getElementsByClassName("closeinfo")[0].onclick=function(){
                            var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                            var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                            document.querySelector('.login').removeChild(c)
                            document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                         document.getElementsByClassName('errorMessageTop')[0].innerHTML="Incomplete information"
                         document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Please fill in the complete information."
                        } else if (lang == "zh_TW") {
                          document.getElementsByClassName('errorMessageTop')[0].innerHTML="邮箱不能为空"
                          document.getElementsByClassName('errorMessageBottom')[0].innerHTML="邮箱不能为空"
                        } else {
                             document.getElementsByClassName('errorMessageTop')[0].innerHTML="邮箱不能为空"
                             document.getElementsByClassName('errorMessageBottom')[0].innerHTML="邮箱不能为空"
                        }
                        return
                    }
                    // if (!regValid.test(this.inputtext.email)) {
                    //     document.getElementsByClassName('errorMessage')[0].style.display="block"
                    //     document.getElementsByClassName('maskLayer')[0].style.display="block"
                    //     if (lang == "en_US") {
                    //     this.theuser="Incorrect email"
                    //     this.information="Please enter the correct email address."
                    //     } else if (lang == "zh_TW") {
                    //     this.theuser="郵箱不正確"
                    //     this.information="請您輸入正確的郵箱地址"
                    //     } else {
                    //     this.theuser="邮箱不正确"
                    //     this.information="请您输入正确的邮箱地址"
                    //     }
                    //     return
                    // }
                    let params={
                        type:6,
                        sendTo:this.inputtext.email
                    }
                    axios.post('/comm/mail/send',params).then(res=>{
                        
                    })
                    this.isfalse=true
                    let time =60
                    let that=this
                    document.getElementsByClassName('emailsendNumber')[0].style.background="#e9e9e9"
                    let sendtime=setInterval(function(){
                        time-=1
                        document.getElementsByClassName('emailsendNumber')[0].innerHTML=time +"s"
                        if(time==0){
                            if (lang == "en_US") {
                                document.getElementsByClassName('emailsendNumber')[0].innerHTML="send code" 
                            } else if (lang == "zh_TW") {
                                document.getElementsByClassName('emailsendNumber')[0].innerHTML="發送驗證碼" 
                            } else {
                                document.getElementsByClassName('emailsendNumber')[0].innerHTML="发送验证码" 
                            }
                            document.getElementsByClassName('emailsendNumber')[0].style.background="white"
                            that.isfalse=false
                            clearInterval(sendtime)
                        }
                    },1000)
                },
                quickLogin: function(e) {//回车及Enter登录
                    if (e.keyCode == 13 || e.keyCode == 108) {
                        this.login();
                    }
               },
                getCookie(cookiename) {
                //获取cookie
                var arr,
                    reg = new RegExp("(^| )" + cookiename + "=([^;]*)(;|$)");
                if ((arr = document.cookie.match(reg))) {
                    return unescape(arr[2]);
                } else {
                    return null;
                }
                },
                CheckAgreement() {
                    this.ischeck = !this.ischeck
                },
                submit() {//请求注册
                     var reg = /^\+?[1-9]\d*$/;
                    if(document.getElementsByClassName('maskLayer')[0]){
                        var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                        var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                        document.querySelector('.login').removeChild(c)
                        document.querySelector('.login').removeChild(d)
                        return
                    }
                    let lang = this.getCookie("lang");
                    let regValid = (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)
                    if (!this.ischeck) {
                         var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                        var b='<div class="maskLayer"></div>'
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                        document.getElementsByClassName("closeinfo")[0].onclick=function(){
                            var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                            var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                            document.querySelector('.login').removeChild(c)
                            document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                             document.getElementsByClassName('errorMessageTop')[0].innerHTML="Registration Failed"
                             document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Please check the agreement."
                        } else if (lang == "zh_TW") {
                             document.getElementsByClassName('errorMessageTop')[0].innerHTML="註冊失敗"
                             document.getElementsByClassName('errorMessageBottom')[0].innerHTML="請您勾選協議"
                        } else {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="注册失败"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="请您勾选协议"
                        }
                        return
                    }
                    if (this.inputtext.email == undefined || this.inputtext.password == undefined || this.inputtext.rpassword == undefined) {
                         var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                        var b='<div class="maskLayer"></div>'
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                        document.getElementsByClassName("closeinfo")[0].onclick=function(){
                            var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                            var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                            document.querySelector('.login').removeChild(c)
                            document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="Registration Failed"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Please fill in the complete information."
                        } else if (lang == "zh_TW") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="註冊失敗"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="信息不完整,請您填好完整信息"
                        } else {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="注册失败"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="信息不完整,请您填好完整信息"
                        }
                        return
                    }
                    if (!regValid.test(this.inputtext.email)) {
                         var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                        var b='<div class="maskLayer"></div>'
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                        document.getElementsByClassName("closeinfo")[0].onclick=function(){
                            var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                            var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                            document.querySelector('.login').removeChild(c)
                            document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="Registration Failed"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Please enter the correct email address."
                        } else if (lang == "zh_TW") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="註冊失敗"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="郵箱不正確,請您輸入正確的郵箱地址"
                        } else {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="注册失败"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="邮箱不正确,请您输入正确的邮箱地址"
                        }
                        return
                    }
                    if (this.inputtext.password != this.inputtext.rpassword) {
                          var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                        var b='<div class="maskLayer"></div>'
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                        document.getElementsByClassName("closeinfo")[0].onclick=function(){
                            var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                            var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                            document.querySelector('.login').removeChild(c)
                            document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="Registration Failed"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="The two passwords are inconsistent."
                        } else if (lang == "zh_TW") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="註冊失敗"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="兩次密碼輸入不壹致"
                        } else {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="注册失败"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="两次密码输入不一致"
                        }
                        return
                    }
                    if (this.inputtext.password.length<6 || this.inputtext.rpassword.length<6) {
                          var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                        var b='<div class="maskLayer"></div>'
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                        document.getElementsByClassName("closeinfo")[0].onclick=function(){
                            var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                            var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                            document.querySelector('.login').removeChild(c)
                            document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="Registration Failed"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Password length cannot be less than 6"
                        } else if (lang == "zh_TW") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="註冊失敗"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="密碼長度不能小於6"
                        } else {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="注册失败"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="密码长度不能小于6"
                        }
                        return
                    }
                    // if (document.getElementsByClassName("sencode")[0].value == "") {
                    //     document.getElementsByClassName('errorMessage')[0].style.display="block"
                    //     document.getElementsByClassName('maskLayer')[0].style.display="block"
                    //     if (lang == "en_US") {
                    //         this.theuser="Registration Failed"
                    //         this.information="Please enter verification code"
                    //     } else if (lang == "zh_TW") {
                    //         this.theuser="註冊失敗"
                    //         this.information="請輸入驗證碼"
                    //     } else {
                    //         this.theuser="注册失败"
                    //         this.information="请输入验证码"
                    //     }
                    //     return
                    // }
                    if (this.istrue == true) {
                        let params={
                            email:this.inputtext.email,
                            password:this.inputtext.password,
                            // checkCode:parseFloat(document.getElementsByClassName("sencode")[0].value)
                        }
                        if(this.invite&&this.invite!=""){
                             if (!reg.test(this.invite)) {
                            var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                            document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                            var b='<div class="maskLayer"></div>'
                            document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                            document.getElementsByClassName("closeinfo")[0].onclick=function(){
                                var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                                var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                                document.querySelector('.login').removeChild(c)
                                document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                             document.getElementsByClassName('errorMessageTop')[0].innerHTML="Incorrect input ID"
                             document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Please enter the correct ID."
                        } else if (lang == "zh_TW") {
                             document.getElementsByClassName('errorMessageTop')[0].innerHTML=" 輸入ID有誤"
                             document.getElementsByClassName('errorMessageBottom')[0].innerHTML="請您輸入正確ID"
                        } else {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="输入ID有误"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="请您输入正确ID"
                        }
                        return
                    }
                            params.refererId=parseFloat(this.invite)
                        }else{
                             if(this.refID){
                               params.refererId=parseFloat(this.refID)
                           }
                        }
                        let isref=location.href.indexOf('ref')
                        if(isref!=-1){
                            params.refererId=parseInt(location.href.slice(location.href.lastIndexOf('=')+1))
                        }
                        axios.post('/user/register',params).then((res) => {
                            if(res.data.code==-10002){
                                var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                                document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                                var b='<div class="maskLayer"></div>'
                                document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                                document.getElementsByClassName("closeinfo")[0].onclick=function(){
                                    var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                                    var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                                    document.querySelector('.login').removeChild(c)
                                    document.querySelector('.login').removeChild(d)
                                }
                                if (lang == "en_US") {
                                    document.getElementsByClassName('errorMessageTop')[0].innerHTML="Registration Failed"
                                    document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Email already exists, please re-enter"
                                } else if (lang == "zh_TW") {
                                     document.getElementsByClassName('errorMessageTop')[0].innerHTML="註冊失敗"
                                     document.getElementsByClassName('errorMessageBottom')[0].innerHTML="郵箱已存在,請重新輸入"
                                } else {
                                     document.getElementsByClassName('errorMessageTop')[0].innerHTML="注册失败"
                                     document.getElementsByClassName('errorMessageBottom')[0].innerHTML="邮箱已存在,请重新输入"
                                }
                            }else if(res.data.code==200){
                                location.href='/singin'
                                sessionStorage.removeItem("refererId");
                            }else if(res.data.code==-10003){
                                var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                                document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                                var b='<div class="maskLayer"></div>'
                                document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                                document.getElementsByClassName("closeinfo")[0].onclick=function(){
                                    var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                                    var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                                    document.querySelector('.login').removeChild(c)
                                    document.querySelector('.login').removeChild(d)
                                }
                                if (lang == "en_US") {
                                    document.getElementsByClassName('errorMessageTop')[0].innerHTML="Registration Failed"
                                    document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Registration is wrong, please re-register."
                                } else if (lang == "zh_TW") {
                                    document.getElementsByClassName('errorMessageTop')[0].innerHTML="註冊失敗"
                                    document.getElementsByClassName('errorMessageBottom')[0].innerHTML="註冊有誤，請重新註冊"
                                } else {
                                    document.getElementsByClassName('errorMessageTop')[0].innerHTML="注册失败"
                                    document.getElementsByClassName('errorMessageBottom')[0].innerHTML="注册有误，请重新注册"
                                }
                            }
                        })
                    } else {
                        return
                    }

                }
            },
            mounted(){
                this.loading=true
            }
        })
    </script>

</body>

</html>